<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .demo span{
            vertical-align: top;
            margin-right: 20px;
        }
        .demo img{
            vertical-align: top;
        }
    </style>
</head>
<body>
    <!-- 示例 -->
    <div class="demo">
        <span>示例</span>
        <img src="../assets/imgs/img_boxshadow.jpg" alt="">
    </div>
    <!-- 输入 -->
    <div id="app" class="form">
        <div>
            <span>颜色(R)</span>
            <input v-model="colorR" placeholder="0-255" type="text">
        </div>
        <div>
            <span>颜色(G)</span>
            <input v-model="colorG" placeholder="0-255" type="text">
        </div>
        <div>
            <span>颜色(B)</span>
            <input v-model="colorB" placeholder="0-255" type="text">
        </div>
        <div>
            <span>不透明度(A)</span>
            <input v-model="colorA" placeholder="如0 0.1 0.2 1" type="text">
        </div>
        <div>
            <span>角度</span>
            <input v-model="angle" type="text">
        </div>
        <div>
            <span>距离(像素)</span>
            <input v-model="distance" type="text">
        </div>
        <div>
            <span>扩展(%)</span>
            <input v-model="spread" type="text">
        </div>
        <div>
            <span>大小(像素)</span>
            <input v-model="size" type="text">
        </div>
        <div>
            <button @click="change">转换</button>
            <br>
            <span>box-shadow:{{boxShadow}}</span>
            <br>
            <span>text-shadow:{{textShadow}}</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                boxShadow: '',
                textShadow: '',
                colorR: '', // 颜色r
                colorG: '', // 颜色g
                colorB: '', // 颜色b
                colorA: '', // 颜色a
                angle: '', // 角度
                distance: '', // 距离
                spread: '', // 扩展
                size: '' // 大小
            },
            methods: {
                change: function () {

                    var ang = (180 - Number(this.angle)) / 180 * Math.PI;

                    var color = '(' + this.colorR  + ',' + this.colorG + ',' + this.colorB + ',' + this.colorA + ')';
                    
                    var xOffset = (this.distance * Math.cos(ang)).toFixed(2);

                    var yOffset = (this.distance * Math.sin(ang)).toFixed(2);

                    var spreadRadius = ( this.spread * this.size / 100 ).toFixed(2);

                    var blurRadius = (this.size - spreadRadius).toFixed(2);

                    this.boxShadow = '' + xOffset + ' ' + yOffset + ' ' + blurRadius + ' ' + spreadRadius + ' rgba' + color;
                    this.textShadow = '' + xOffset + ' ' + yOffset + ' ' + blurRadius + ' rgba' + color;
                }
            }
        })
    </script>
</body>
</html>